<template>
  <el-form :model="formData" label-width="150px">
    <el-form-item label="头像：" prop="headPhoto">
      <el-col v-if="changeState" :span="12" :offset="0">
        <el-avatar size="large" :src="formData.headPhoto"></el-avatar>
      </el-col>
      <el-col v-else :span="12" :offset="0">
        <el-avatar size="large" :src="formData.headPhoto"></el-avatar>
      </el-col>
    </el-form-item>
    <el-form-item label="姓名：" prop="name">
      <el-col v-if="changeState" :span="12" :offset="0">
        <el-input
          class="rp-input"
          placeholder="请输入姓名"
          v-model="formData.name"
          clearable
          suffix-icon="el-icon-edit"
        ></el-input>
      </el-col>
      <el-col v-else :span="12" :offset="0"> {{ formData.name }} </el-col>
    </el-form-item>
    <el-form-item label="邮箱：" prop="mail">
      <el-col v-if="changeState" :span="12" :offset="0">
        <el-input
          class="rp-input"
          placeholder="请输入邮箱"
          v-model="formData.mail"
          clearable
          suffix-icon="el-icon-edit"
        ></el-input>
      </el-col>
      <el-col v-else :span="12" :offset="0">{{ formData.mail }} </el-col>
    </el-form-item>
    <el-form-item label="电话：" prop="telNum">
      <el-col v-if="changeState" :span="12" :offset="0">
        <el-input
          class="rp-input"
          placeholder="请输入邮箱"
          v-model="formData.telNum"
          clearable
          suffix-icon="el-icon-edit"
        ></el-input>
      </el-col>
      <el-col v-else :span="12" :offset="0"> {{ formData.telNum }}</el-col>
    </el-form-item>
    <el-form-item label="手机：" prop="phoneNum">
      <el-col v-if="changeState" :span="12" :offset="0">
        <el-input
          class="rp-input"
          placeholder="请输入手机号"
          v-model="formData.phoneNum"
          clearable
          suffix-icon="el-icon-edit"
        ></el-input>
      </el-col>
      <el-col v-else :span="12" :offset="0"> {{ formData.phoneNum }} </el-col>
    </el-form-item>
    <el-form-item label="备注：" prop="remarks">
      <el-col v-if="changeState" :span="12" :offset="0">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2 }"
          class="rp-input"
          placeholder="请输入备注信息"
          v-model="formData.remarks"
          clearable
          suffix-icon="el-icon-edit"
        ></el-input>
      </el-col>
      <el-col v-else :span="12" :offset="0"> {{ formData.remarks }} </el-col>
    </el-form-item>
    <el-form-item label="用户类型：" prop="type">
      <el-col v-if="changeState" :span="12" :offset="0">
        <el-input
          class="rp-input"
          placeholder="请输入备注信息"
          v-model="formData.type"
          clearable
          suffix-icon="el-icon-edit"
        ></el-input>
      </el-col>
      <el-col v-else :span="12" :offset="0"> {{ formData.type }} </el-col>
    </el-form-item>
    <el-form-item label="用户角色：" prop="role">
      <el-col v-if="changeState" :span="12" :offset="0">
        <el-select v-model="formData.role" placeholder="请选择角色">
          <el-option label="最高管理员" value="0"></el-option>
          <el-option label="栏目管理员" value="1"></el-option>
        </el-select>
      </el-col>
      <el-col v-else :span="12" :offset="0"> {{ formData.role }} </el-col>
    </el-form-item>
    <el-form-item label="上次登录：" prop="prev">
      <el-col :span="12" :offset="0">{{ formData.prev }} </el-col>
    </el-form-item>
    <el-form-item>
      <el-button v-if="changeState" type="primary" :loading="submitFlag" @click="submit">
        提交
      </el-button>
      <el-button v-else type="primary" @click="modify">修改</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
        submitFlag: false,
        changeState: false,
        formData: {
          headPhoto: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          name: '系统管理员',
          mail: 'xxxxxxx@wasu.cn',
          telNum: '+86-0571-xxxxxxx',
          phoneNum: '137****5565',
          remarks: '最高管理员',
          type: '系统管理',
          role: '系统管理员',
          prev: 'IP: 127.0.0.1 时间：2022年2月23日 星期三 15:05:35'
        }
      }
    },
    methods: {
      submit() {
        console.log(this.formData)
        this.submitFlag = true
        setTimeout(() => {
          this.submitFlag = false
          this.changeState = false
          this.$message({
            message: '恭喜你，保存成功',
            type: 'success'
          })
        }, 500)
      },
      modify() {
        this.changeState = true
      }
    }
  }
</script>
